<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="账号登录"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> 
    <van-form 
      :model="form"
      :rules="rules"
      ref="form"
      style="margin: 20px 15px;">
      <van-field
        v-model="form.username"
        label="用户名"
        placeholder="请输入用户名" />
      <van-field prop="password"
        v-model="form.password"
        type="password"
        label="密码"
        placeholder="请输入密码" />
      <div style="margin: 16px;">
        <van-button class="btn" @click="onSubmit()" >登录</van-button>
      </div>
      <router-link to="/my/phonelogin">
        <p style="color: gray;margin: 5px 25px;font-size: 15px;">手机验证码登录</p>
      </router-link>
    </van-form>
    <van-divider
      :style="{ color: '#A9A9A9', borderColor: '#A9A9A9', padding: '0 16px', margin:'280px 0 0 0' }"
    >
      第三方账号登录
    </van-divider>
    <template>
      <div style="width: 60%; margin: auto; display: flex;">
        <div style="margin: auto;">
          <van-icon name="wechat" size="50" />
          <p style="color: grey;font-size: 15px;">微信</p>
        </div>
        <div style="margin-left: 40px;margin: auto;">
          <van-icon name="alipay" size="50" />
          <p style="color: grey;font-size: 15px;">支付宝</p>
        </div>
        <div style="margin-left: 40px;margin: auto;">
          <van-icon name="share" size="50" />
          <p style="color: grey;font-size: 15px;">更多</p>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import httpApi from '@/http';
import {mapMutations} from 'vuex';

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{3,15}$/,
            message: "3~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "6~15位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 导航栏操作
    onClickLeft() {
      this.$router.push('/home/my')
    },
    onClickRight() {
      this.$router.push('/my/reguest')
    },

    // 将会实现使用  
    // this.saveUser(1) 代替 this.$store.commit('saveUser', 1)
    ...mapMutations(['saveToken', 'saveUser']),

    onSubmit() {
      // 发送登录请求 
      // this.$refs.form.validate(valid=>{
        // if(valid){ // 通过了表单验证
          let params = {
            username: this.form.username,
            password: this.form.password
          }
          httpApi.userApi.login(params).then(res=>{
            console.log('登录结果', res)
            if(res.data.code==200){
              // 将结果存储在vuex中  
              // this.$store.commit('saveUser', res.data.data.user)            
              // this.saveUser(res.data.data.user)
              // 将token存入vuex
              // this.saveToken(res.data.data.token)

              console.log('123',res.data.data.user)
              if (res.data.code==200) {
                this.$router.push({
                  path: "/home/my",
                  query: {
                    userid: res.data.data.user.userid,
                  }
                })
              }else {
                this.$router.push('/home/my/:userid')
              }
              
            }
          })
        // }   
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.btn{
  width: 80%;
  margin: 0 0 0 25px;
  margin-top: 150px;
  background-color: rgb(242,242,242);
}
</style>